<script setup name="informList">
import OAMain from '@/components/OAMain.vue';
import { ref, reactive, onMounted, shallowRef, onBeforeUnmount } from "vue"
import OADialog from '@/components/OADialog.vue';
import OAPageHeader from '@/components/OAPageHeader.vue';
import OAPagination from '@/components/OAPagination.vue';
import timeFormatter from '@/utils/timeFormatter';
import { useAuthStore } from '@/stores/auth';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';

const authStore = useAuthStore()

let informs = ref([])
let dialogVisible = ref(false)
const onShowDialog = (index) => {
    handleIndex = index
    dialogVisible.value = true;
}


let pagination = reactive({
    page:0,
    total:1
})

let handleIndex = 0

onMounted(async () => {
    try {
        let data = await informHttp.getInformList()
        pagination.page = data.count
        informs.value =data.results
        console.log(data)
    } catch (detail) {
        ElMessage.error(detail)
    }
})

const onDeleteInform = async () => {
    try{
        let inform = informs.value[handleIndex]
        await informHttp.deleteInform(inform.id)
        informs.value.splice(handleIndex, 1)
        ElMessage.success("通知删除成功")
    }catch(detail){
        ElMessage.error(detail)
    }
}

</script>



<template>
    <OADialog v-model="dialogVisible" title="提示" @submit="onDeleteInform">
        <span>确定删除？</span>
    </OADialog>
    <OAMain title="通知列表">
        <el-card>
            <el-table :data="informs">
                <el-table-column label="标题">
                    <template #default="scope">
                        <el-badge v-if="scope.row.reads.length==0" is-dot class="item">
                            <RouterLink :to="{name: 'inform_detail', params: {pk: scope.row.id}}">
                            {{ scope.row.title }}
                        </RouterLink>
                        </el-badge>
                        <RouterLink v-else :to="{name: 'inform_detail', params: {pk: scope.row.id}}">
                            {{ scope.row.title }}
                        </RouterLink>
                    </template>
                </el-table-column>
                <el-table-column label="发布者">
                    <template #default="scope">
                        {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="部门可见">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.public">all</el-tag>
                        <el-tag type="info" v-else v-for="department in scope.row.departments" :key="department.name">{{ department.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onShowDialog(scope.$index)" type="danger" icon="Delete"></el-button>
                        <el-button type="default" v-else disabled>无</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>

</template>
<style scoped>
.el-tag{
    margin-right: 4px;
}

.el-badge{
    margin-top: 4px;
}
</style>